<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body>
        <div id = "app">
            {{msg}}
            <table>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>用户名</th>
                    <th>密码</th>
                    <th>金额</th></th></th>
                </tr>
                <tr v-for="(item,index) in users.data">
                    <td>{{index +1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.password}}</td>
                    <td>{{item.cash}}</td>
                </tr>
            </table>
        </div>
    
        <script src="./node_modules/vue/dist/vue.js"></script>
        <script src="./node_modules/axios/dist/axios.js"></script>
        <script>
            const vm = new Vue({
                el:"#app",
                data:{
                    msg:"hello",
                    users:[]
                },
                created () {
                    axios.get('./users.json')
                    .then(response => {
                        // console.log(response.data);
                        this.users = response.data
                    })
                    .catch(function (error) {
                        console.log(error);
                    });

                }
            })

         
        </script>
</body>
</html>